<!-- 系统设置板块 ---  营销设置页面 -->
<template>

  <div>
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="充值套餐设置">
        <div>
          <r-table :tableHandles="tableHandles" :isSelection="false" :isIndex="false" :isPagination="false"
            :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" :isHandle="true" @refresh="getData()">
          </r-table>

          <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm"
            labelWidth="200px" dialogWidth="700px" :isHandle="true" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="新用户赠送设置">
        <r-search ref="search" labelWidth="200px" labelPosition="right" :searchData="searchData"
          :searchForm="searchForm" :searchHandle="searchHandle" :inline="false" :searchRules="searchRules">
          <slot slot="slot1">
            <div style="margin-left: -150px">
              提示：用户使用赠送的金额消费的订单由运营商承担其营销费用
            </div>
          </slot>
        </r-search>
      </el-tab-pane>
      <el-tab-pane label="充电业务基础设置">
        <r-search v-if="activeName == '充电业务基础设置' && isShowTinymce" ref="search2" labelWidth="320px"
          labelPosition="right" :searchData="searchData2" :searchForm="searchForm2" :searchHandle="searchHandle2"
          :inline="false" :searchRules="searchRules2">
        </r-search>
      </el-tab-pane>
      <!-- <el-tab-pane label="换电业务基础设置">
        <r-search v-if="activeName == '换电业务基础设置' && isShowTinymce" ref="search3" labelWidth="320px"
          labelPosition="right" :searchData="searchData3" :searchForm="searchForm3" :searchHandle="searchHandle3"
          :inline="false" :searchRules="searchRules3">
          <slot slot="slot1">
            <div style="margin-left: -150px">
              （订单结束后用户未归还电池则会开始收取逾期费，直至用户归还后或逾期费达到押金金额便停止扣费）
            </div>
          </slot>
        </r-search>
      </el-tab-pane> -->
      <!-- <el-tab-pane label="租车业务基础设置">
        <r-search v-if="activeName == '租车业务基础设置' && isShowTinymce" ref="search4" labelWidth="320px"
          labelPosition="right" :searchData="searchData4" :searchForm="searchForm4" :searchHandle="searchHandle4"
          :inline="false" :searchRules="searchRules4">
          <slot slot="slot1">
            <div style="margin-left: -150px">
              （订单结束后用户未归还车辆则会开始收取逾期费，直至用户归还后或逾期费达到押金金额便停止扣费）
            </div>
          </slot>
        </r-search>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "platform_information",
  data() {
    return {
      activeName: '充值套餐设置',
      isShowTinymce: false,
      tableHandles: [
        {
          label: "添加",
          type: "primary",
          handle: (e) => this.elFormVisible(),
        },
        {
          type: "switch",
          inactive_text: "赠送金额(全选)",
          values: [1, 2],
          data: 2,
          change: async (item) => {

            if (item.data = 1) {

              this.$message({
                message: "修改成功！",
                type: "success",
              });
            }
            else {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
            }
            const res = await this.apis.settingTopup_startOrStop({
              // id:row.id
            });
            this.getData();
          },
        },
      ],
      tableData: [],
      tableCols: [
        {
          label: "套餐id",
          prop: "id",
        },
        {
          label: "套餐名称",
          prop: "mealName",
        },
        {
          label: "充值金额",
          prop: "inMoney",
        },
        {
          label: "赠送金额",
          prop: "outMoney",
          formatter: (row) => {
            if (row.outStatus == 2) {
              return "0";
            } else {
              return row.outMoney;
            }
          },
        },
        {
          label: "赠送功能是否开启",
          prop: "outStatus",
          type: "tag",
          formatter: (row) => {
            if (row.outStatus == 2) {
              return "否";
            } else {
              return "是";
            }
          },
        },
        {
          label: "操作",
          type: "button",
          width: 300,
          btnList: [
            {
              label: "编辑",
              type: "text",
              handle: (row) => this.edit(row),
            },
            {
              label: "删除",
              type: "text",
              handle: (row) => {
                this.$confirm("确定要删除吗？", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                })
                  .then(async () => {
                    const res = await this.apis.settingTopup_del({
                      id: row.id,
                    });
                    this.$message({
                      message: "删除成功！",
                      type: "success",
                    });
                    this.getData();
                  })
                  .catch(() => { });
              },
            },
          ],
        },
      ],
      tablePage: { limit: 10, page: 1, total: 0 },

      formData: {
        mealName: "",
        inMoney: "",
        outMoney: "",
        outStatus: '',

      },
      formCols: [
        {
          type: "input",
          label: "套餐名称",
          width: 350,
          prop: "mealName"
        },
        {
          type: "input",
          label: "充值金额",
          width: 350,
          prop: "inMoney",
          remark: "元",
        },
        {
          type: "input",
          label: "赠送金额",
          width: 350,
          prop: "outMoney",
          remark: "元",
        },
        { type: "radio", label: "是否开启赠送功能", width: 450, prop: "outStatus", radios: [{ label: '是', value: 1 }, { label: '否', value: 2 },] },
      ],
      formRules: {
        mealName: [{ required: true, message: "请输入", trigger: "blur" }],
        inMoney: [{ required: true, message: "请输入", trigger: "blur" }],
        outMoney: [{ required: true, message: "请输入", trigger: "blur" }],
        outStatus: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      formHandle: [
        {
          label: "取消",
          handle: (e) => this.elFormVisible(),
        },
        {
          label: "确定",
          type: "success",
          handle: (e) => this.elFormSubmit(),
        },
      ],

      //===============================================================

      searchData: {
        giveMoney: "",
        outStatus: 2,
        id: "",
      },
      searchForm: [
        {
          type: "input",
          label: "新用户授权注册赠送余额",
          placeholder: "",
          prop: "giveMoney",
          width: 200,
          remark: "元",
        },
        {
          type: "switch",
          label: "赠送功能",
          prop: "outStatus",
          width: 200,
          values: [1, 2],
          change: async (item) => {
            if (item = 1) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
            }
            else {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
            }
          },
        },
        { type: "slot", name: "slot1" },
      ],
      searchHandle: [
        { type: "primary", label: "保存", handle: (e) => this.elFormSubmit2() },
      ],
      searchRules: {
        giveMoney: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      //====================================================================
      searchData2: {
        openStatus: 2,
        occupyTime: "",
        overMoney: "",
        maxMoney: "",
        instructions: "",
        explanation: "",
        freeStatus: 2,
        freeStart:'',
        freeEnd:''
      },
      searchForm2: [
        {
          type: "switch",
          label: "是否开启免费占仓",
          prop: "freeStatus",
          width: 200,
          values: [1, 2],
          change: async (item) => {
            if (item = 1) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
            }
            else {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
            }
          },
        },
        {
          type: "time",
          label: "免费时间段开始",
          prop: "freeStart",
          width: 200,
          change: async (item) => {
            // if (item = 1) {
            //   this.$message({
            //     message: "修改成功！",
            //     type: "success",
            //   });
            // }
            // else {
            //   this.$message({
            //     message: "修改成功！",
            //     type: "success",
            //   });
            // }
          },
        },
        {
          type: "time",
          label: "免费时间段结束",
          prop: "freeEnd",
          width: 200,
          change: async (item) => {
            // if (item = 1) {
            //   this.$message({
            //     message: "修改成功！",
            //     type: "success",
            //   });
            // }
            // else {
            //   this.$message({
            //     message: "修改成功！",
            //     type: "success",
            //   });
            // }
          },
        },
        {
          type: "switch",
          label: "占仓收费功能",
          prop: "openStatus",
          width: 200,
          values: [1, 2],
          change: async (item) => {
            if (item = 1) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
            }
            else {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
            }
          },
        },
        {
          type: "input",
          label: "已结束充电电池免费占用仓位时长（分钟）",
          placeholder: "",
          prop: "occupyTime",
          width: 200,
          remark: "分钟",
        },
        {
          type: "input",
          label: "超出免费占用仓位时长后的每小时占仓费用金额(元)",
          placeholder: "",
          prop: "overMoney",
          width: 200,
          remark: "元",
        },
        {
          type: "input",
          label: "占仓费用上限金额（元）",
          placeholder: "",
          prop: "maxMoney",
          width: 200,
          remark: "元",
        },
        {
          type: "tinymce",
          label: "充电使用须知",
          placeholder: "",
          prop: "instructions",
          width: 200,
        },
        {
          type: "tinymce",
          label: "占仓扣费说明",
          placeholder: "",
          prop: "explanation",
          width: 200,
        },
      ],
      searchHandle2: [
        { type: "primary", label: "保存", handle: (e) => this.elFormSubmit3() },
      ],
      searchRules2: {
        occupyTime: [{ required: true, message: "请输入", trigger: "blur" }],
        overMoney: [{ required: true, message: "请输入", trigger: "blur" }],
        maxMoney: [{ required: true, message: "请输入", trigger: "blur" }],
        instructions: [{ required: true, message: "请输入", trigger: "blur" }],
        explanation: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      //  =====================================================================================
      searchData3: {
        openStatus: "",
        overMoney: "",
        instructions: "",
        protocols: "",
      },
      searchForm3: [
        {
          type: "switch",
          label: "逾期收费功能",
          prop: "openStatus",
          width: 200,
          values: [1, 2],
          change: async (item) => {
            if (item = 1) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
            }
            else {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
            }
          },
        },
        {
          type: "input",
          label: "逾期费",
          placeholder: "",
          prop: "overMoney",
          width: 200,
          remark: "天",
        },
        // { type: "input",label:'占仓费用上限金额', placeholder: "", prop: "programName", width: 200,remark:'元/天' },
        { type: "slot", name: "slot1" },
        {
          type: "tinymce",
          label: "租赁电池须知",
          placeholder: "",
          prop: "instructions",
          width: 200,
        },
        {
          type: "tinymce",
          label: "租赁电池套餐协议",
          placeholder: "",
          prop: "protocols",
          width: 200,
        },
      ],
      searchHandle3: [
        { type: "primary", label: "保存", handle: (e) => this.elFormSubmit4() },
      ],
      searchRules3: {
        overMoney: [{ required: true, message: "请输入", trigger: "blur" }],
        instructions: [{ required: true, message: "请输入", trigger: "blur" }],
        protocols: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      //  ==============================================================================================
      searchData4: {
        openStatus: "",
        overMoney: "",
        instructions: "",
        protocols: "",
      },
      searchForm4: [
        {
          type: "switch",
          label: "逾期收费功能",
          prop: "openStatus",
          width: 200,
          values: [1, 2],
          change: async (item) => {
            console.log(item);
            if (item = 1) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
            }
            else {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
            }
          },
        },
        {
          type: "input",
          label: "逾期费",
          placeholder: "",
          prop: "overMoney",
          width: 200,
          remark: "天",
        },
        // { type: "input",label:'占仓费用上限金额', placeholder: "", prop: "programName", width: 200,remark:'元/天' },
        { type: "slot", name: "slot1" },
        {
          type: "tinymce",
          label: "租赁车辆须知",
          placeholder: "",
          prop: "instructions",
          width: 200,
        },
        {
          type: "tinymce",
          label: "租赁车辆套餐协议",
          placeholder: "",
          prop: "protocols",
          width: 200,
        },
      ],
      searchHandle4: [
        { type: "primary", label: "保存", handle: (e) => this.elFormSubmit5() },
      ],
      searchRules4: {
        overMoney: [{ required: true, message: "请输入", trigger: "blur" }],
        instructions: [{ required: true, message: "请输入", trigger: "blur" }],
        protocols: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getData();
    this.settingGive_getInfo();
    this.settingCharge_getInfo();
    // this.settingExchange_getInfo();
    // this.settingRent_getInfo();
    this.$nextTick(() => this.isShowTinymce = true)
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.label
      this.isShowTinymce = false
      this.$nextTick(() => this.isShowTinymce = true)
    },
    async getData() {
      const res = await this.apis.settingTopup_list({});
      const list = res.rows;
      this.tableData = list;
      this.tablePage.total = res.total;

      // table栏的数据控制是否开启赠送金额按钮
      // this.tableHandles[0].data  是添加按钮
      // this.tableHandles[1].data  是是否开启赠送金额按钮
      if (list.length > 0) {
        // this.tableHandles[1].data = list[1].outStatus;
        if (list.findIndex(target => target.outStatus === 2) == -1) {
          console.log(1111111111);
          this.tableHandles[1].data = 1;
        } else {
          this.tableHandles[1].data = 2;
        }
      }
    },
    //充值套餐
    elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (!this.formData.id) {
            const res = await this.apis.settingTopup_save({
              mealName: this.formData.mealName,
              inMoney: this.formData.inMoney,
              outMoney: this.formData.outMoney,
              outStatus: this.formData.outStatus,
            });
          } else {
            const res = await this.apis.settingTopup_updata({
              mealName: this.formData.mealName,
              inMoney: this.formData.inMoney,
              outMoney: this.formData.outMoney,
              outStatus: this.formData.outStatus,
              id: this.formData.id,
            });
          }

          this.elFormVisible();
          this.getData();
        }
      });
    },
    edit(row) {
      Object.keys(this.formData).forEach((key) => {
        this.formData[key] = row[key];
      });

      this.formData.id = row.id;

      this.elFormVisible();
    },
    //  ================================
    async settingGive_getInfo() {
      const res = await this.apis.settingGive_getInfo();
      const data = res.data;

      this.searchData.giveMoney = data.giveMoney;
      this.searchData.outStatus = data.outStatus;
      this.searchData.id = data.id;
    },
    //赠送金额
    elFormSubmit2() {
      this.$refs.search.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const res = await this.apis.settingGive_saveOrUpdate({
            giveMoney: this.searchData.giveMoney,
            outStatus: this.searchData.outStatus,
            id: this.searchData.id,
          });

          this.$message({
            message: "操作成功！",
            type: "success",
          });
        }
      });
    },
    //  =============充电业务基础设置===============================
    async settingCharge_getInfo() {
      const res = await this.apis.settingCharge_getInfo();
      const data = res.data;
      Object.keys(this.searchData2).forEach((key) => {
        this.searchData2[key] = data[key];
      });
    },
    elFormSubmit3() {
      this.$refs.search2.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const res = await this.apis.settingCharge_saveOrUpdate({
            occupyTime: this.searchData2.occupyTime,
            overMoney: this.searchData2.overMoney,
            maxMoney: this.searchData2.maxMoney,
            instructions: this.searchData2.instructions,
            explanation: this.searchData2.explanation,
            freeStatus: this.searchData2.freeStatus,
            freeStart: this.searchData2.freeStart,
            freeEnd: this.searchData2.freeEnd,
            openStatus: this.searchData2.openStatus,
            id: this.searchData2.id,
          });

          this.$message({
            message: "操作成功！",
            type: "success",
          });
        }
      });
    },
    //  ==============换电业务基础设置================
    async settingExchange_getInfo() {
      const res = await this.apis.settingExchange_getInfo();
      const data = res.data;
      Object.keys(this.searchData3).forEach((key) => {
        this.searchData3[key] = data[key];
      });
    },
    elFormSubmit4() {
      this.$refs.search3.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const res = await this.apis.settingExchange_saveOrUpdate({
            overMoney: this.searchData3.overMoney,
            instructions: this.searchData3.instructions,
            protocols: this.searchData3.protocols,
            openStatus: this.searchData3.openStatus,
            // id:this.searchData3.id,
          });
          this.$message({
            message: "操作成功！",
            type: "success",
          });
        }
      });
    },
    //=============================租车业务基础设置========================================
    async settingRent_getInfo() {
      const res = await this.apis.settingRent_getInfo();
      const data = res.data;
      Object.keys(this.searchData4).forEach((key) => {
        this.searchData4[key] = data[key];
      });
    },
    elFormSubmit5() {
      this.$refs.search4.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const res = await this.apis.settingRent_saveOrUpdate({
            overMoney: this.searchData4.overMoney,
            instructions: this.searchData4.instructions,
            protocols: this.searchData4.protocols,
            openStatus: this.searchData4.openStatus,
            // id:this.searchData4.id,
          });
          this.$message({
            message: "操作成功！",
            type: "success",
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.c1 {
  >div {
    >div:nth-child(1) {
      line-height: 40px;
      font-weight: bold;
      font-size: 18px;
    }
  }
}

:deep .el-form-item:last-child .el-form-item__content {
  // margin-left: 600px !important;
}
</style>
